<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div style="width: 100%; height: 1350px; margin: 0 auto; background-color: #ffffff;">
        <div style="height: 90px; background-color: #ffffff;"></div>
        <div style="width: 1200px; height: 1000px; margin: 0 auto; background-color: #ffffff;">
            <div style="width: 1200px; height: 28px; float: left; text-align: left;">
                <div style="font-size: 14px; color: #333333;">
                    购买帐号：{{frontUser.frontDeskName}}
                </div>
                <div style="height: 10px;"></div>
                <div style="width: 1200px; height: 28px;">
                    <span v-if="frontUser.frontDeskPhone === ''">手机号：未绑定</span>
                    <span v-else>手机号：{{ frontUser.frontDeskPhone }}</span>
                </div>
                <div style="height: 20px;"></div>
                <div style="width: 1200px; height: 22px; font-size: 20px; color: #333333;">
                    该系列课程包含以下课程：
                </div>
                <div style="height: 20px;"></div>
                <div style="width: 1200px; height: 16px; font-size: 12px; color: #999999;">
                    <i class="el-icon-warning"></i>购买后不支持退款、转让，请确认开课时间或有效期后再提交订单
                </div>
                <div style="width: 1200px; height: 16px; margin-left: 11px; font-size: 12px; color: #999999;">
                    已购买过的课程会从实付金额中扣除
                </div>
                <div style="height: 20px;"></div>
                <div style="width: 1200px; height: 19px; font-size: 14px; color: #333333;">
                    确认订单信息
                </div>
                <div style="height: 20px;"></div>
                <div class="custom-box">
                    <img style="width: 120px; height: 68px; margin-top: 20px; margin-left: 20px;" src="../../assets/14.png" alt="">
                    <div style="width: 300px; height: 38px; margin-left: 150px; margin-top: -75px; font-size: 14px; color: #333333;">
                        python数据分析与机器学习实战python数据分析与机器学习实战
                    </div>
                    <div style="width: 48px; height: 16px; margin-left: 600px; margin-top: -35px; font-size: 12px; color: #666666;">
                        永久有效
                    </div>
                </div>
                <div style="height: 1px;"></div>
                <div class="custom-box">
                    <img style="width: 120px; height: 68px; margin-top: 20px; margin-left: 20px;" src="../../assets/15.png" alt="">
                    <div style="width: 300px; height: 38px; margin-left: 150px; margin-top: -75px; font-size: 14px; color: #333333;">
                        Python-机器学习-进阶实战
                    </div>
                    <div style="width: 48px; height: 16px; margin-left: 600px; margin-top: -35px; font-size: 12px; color: #666666;">
                        永久有效
                    </div>
                </div>
                <div style="height: 1px;"></div>
                <div class="custom-box">
                    <img style="width: 120px; height: 68px; margin-top: 20px; margin-left: 20px;" src="../../assets/16.png" alt="">
                    <div style="width: 300px; height: 38px; margin-left: 150px; margin-top: -75px; font-size: 14px; color: #333333;">
                        数据科学人工智能-必备数学基础
                    </div>
                    <div style="width: 48px; height: 16px; margin-left: 600px; margin-top: -35px; font-size: 12px; color: #666666;">
                        永久有效
                    </div>
                </div>
                <div style="height: 1px;"></div>
                <div class="custom-box">
                    <img style="width: 120px; height: 68px; margin-top: 20px; margin-left: 20px;" src="../../assets/17.png" alt="">
                    <div style="width: 300px; height: 38px; margin-left: 150px; margin-top: -75px; font-size: 14px; color: #333333;">
                        深度学习入门视频课程
                    </div>
                    <div style="width: 48px; height: 16px; margin-left: 600px; margin-top: -35px; font-size: 12px; color: #666666;">
                        永久有效
                    </div>
                </div>
                <div style="height: 1px;"></div>
                <div class="custom-box">
                    <img style="width: 120px; height: 68px; margin-top: 20px; margin-left: 20px;" src="../../assets/18.png" alt="">
                    <div style="width: 300px; height: 38px; margin-left: 150px; margin-top: -75px; font-size: 14px; color: #333333;">
                        深度学习与Tensorflow2实战
                    </div>
                    <div style="width: 48px; height: 16px; margin-left: 600px; margin-top: -35px; font-size: 12px; color: #666666;">
                        永久有效
                    </div>
                </div>
                <div style="height: 1px;"></div>
                <div class="custom-box">
                    <img style="width: 120px; height: 68px; margin-top: 20px; margin-left: 20px;" src="../../assets/19.png" alt="">
                    <div style="width: 300px; height: 38px; margin-left: 150px; margin-top: -75px; font-size: 14px; color: #333333;">
                        深度学习-Tensorflow-项目实战
                    </div>
                    <div style="width: 48px; height: 16px; margin-left: 600px; margin-top: -35px; font-size: 12px; color: #666666;">
                        永久有效
                    </div>
                </div>
                <div style="width: 200px; height: 17px; margin-left: 780px; margin-top: 40px; font-size: 16px; color: #FE6300;">
                    会员优惠已省￥1090.00，
                </div>
                <div style="width: 200px; height: 17px; margin-left: 1050px; margin-top: -16px; font-size: 16px; color: #444444;">
                    总计：&nbsp;¥998.00
                </div>
                <div style="width: 200px; height: 17px; margin-left: 1020px; margin-top: 25px; font-size: 16px; color: #10AE58;">
                    <div style="justify-content: center; align-items: center; display: flex; flex-direction: column;" @click="handleOpenVipClick()">
                        没有会员，点此开通
                    </div>
                </div>
            </div>
        </div>
            <div style="width: 1800px; height: 148px; margin: 0 auto; border: 1px solid gray; background-color: #FFFCEF;">
                <div style="width: 69.5%; height: 148px; float: left; background-color: #FFFCEF;">
                    <div style="width: 200px; height: 32px; float: right; margin-top: 60px; margin-left: 200px;">
                    <span style="font-size: 14px; color: #333333;">实付金额：</span>
                    <span style="font-size: 20px; color: #FF3A00;">¥ 998.00</span>
                    </div>
                </div>
                <div style="width: 30.5%; height: 148px; float: right; background-color: #FFFCEF;">
                    <div style="width: 160px; height: 60px; margin-top: 40px; display: flex; margin-left: 89px; align-items: center; justify-content: center; background-color: #FF8000;">
                    <span style="font-size: 20px; color: #FFFFFF;">提交订单</span>
                    </div>
                </div>
            </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      loginId: '',
      userData: '',
      frontUser: ''
    }
  },
  created () {
    // 获取用户存储的信息
    this.userInfo = JSON.parse(localStorage.getItem('user'))
    if (this.userInfo) {
      this.userInfo = this.userInfo.data
      this.loginId = this.userInfo.id
    }
    // 课程信息
    this.userData = JSON.parse(this.$route.query.roid)
    this.getFrontUserById()
  },
  methods: {
    // 跳转至会员开通页面
    handleOpenVipClick () {
      this.$router.push('/memberplacing')
    },
    // 查询个人信息
    getFrontUserById () {
      this.$axios.get('/FrontDeskUser/selectUserbyId?id=' + this.loginId).then((res) => {
        this.frontUser = res.data.data
      })
    }
  }
}

</script>

<style>
.custom-box {
  width: 1200px;
  height: 108px;
  border: 1px solid gray;
  background-color: rgb(247, 247, 247);
  transition: background-color 0.3s; /* 添加过渡效果 */
}
.custom-box:hover {
  background-color: rgb(255, 255, 255); /* 鼠标悬停时的背景颜色 */
}
</style>
